<template>
  <div class="linkdetail">
    <div class="linktop">
      <el-button type="primary" v-show="id == 'app_business_link'" @click="addLink((isSet = 0))">新增</el-button>
      <el-button type="info" icon="el-icon-arrow-left" @click="$router.go(-1)">返回</el-button>
      <!-- <div class="headerbox" v-show="id == '6749182253294321670'">
        <el-form ref="filterForm" v-model="filterForm" inline>
          <el-form-item label="学段">
            <el-select v-model="sectionvalue" placeholder="请选择学段">
              <el-option v-for="item in filterForm.tags" :key="item.code" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="serchTable">搜索</el-button>
          </el-form-item>
        </el-form>
      </div> -->
    </div>
    <div class="datalist">
      <el-table :data="linkDetailData" border style="width: 100%; margin-bottom: 20px">
        <el-table-column prop="id" label="ID"> </el-table-column>
        <el-table-column prop="name" label="页面名称"> </el-table-column>
        <el-table-column prop="url" label="页面地址"> </el-table-column>
        <el-table-column label="打开方式">
          <template slot-scope="scope">
            <el-tag v-show="scope.row.openType == 0" type="success">内部链接</el-tag>
            <el-tag v-show="scope.row.openType == 1" type="info">外部链接</el-tag>
            <el-tag v-show="scope.row.openType == 2" type="danger">新窗口</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            <el-tag v-show="scope.row.dataType == 0" type="success" effect="dark">静态</el-tag>
            <el-tag v-show="scope.row.dataType == 1" effect="dark">动态</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="requestParam" label="参数"> </el-table-column>
        <el-table-column prop="requestType" label="请求方式"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="addLink(scope.row, (isSet = 1))" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="formdata.pageSize"
        :current-page="formdata.pageNum"
        @current-change="SetPage"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
    <!-- 新增链接 -->
    <AddLinkDetail ref="edit" :aDialogFormVisible="aDialogFormVisible" :id="id" @editorList="editList"></AddLinkDetail>
  </div>
</template>
<script>
import AddLinkDetail from "./components/addLinkDetail";
import { getLinkList, getSection } from "@/api/basisMG";
export default {
  components: {
    AddLinkDetail,
  },
  data() {
    return {
      aDialogFormVisible: false,
      id: "",
      filterForm: {
        tags: "",
      },
      formdata: {
        type: "",
        linkTypeId: "",
        pageNum: 1,
        pageSize: 10,
      },
      linkDetailData: [],
      formsecdata: {
        id: "section",
        codes: "",
      },
      sectionvalue: "",
      total: 0,
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getLinkList();
    this.getSectionList();
  },
  methods: {
    // 分页
    SetPage(e) {
      this.formdata.pageNum = e;
      this.getLinkList();
    },
    handleSizeChange (val) {
      this.formdata.pageSize = val;
      this.getLinkList();
    },
    async getLinkList() {
      this.formdata.linkTypeId = this.$route.query.id;
      this.formdata.type = this.$route.query.type;
      const res = await getLinkList(this.formdata);
      this.linkDetailData = res.data.content;
      this.total = res.data.total;
    },
    async getSectionList() {
      const res = await getSection(this.formsecdata);
      this.filterForm.tags = res.data.tagEnumVoList;
    },
    serchTable() {
      console.log("搜索");
    },
    addLink(row) {
      const rowList = {};
      if (this.isSet == 0) {
        //点击添加
        rowList.isSet = 0;
      } else {
        //点击编辑
        rowList.name = row.name;
        rowList.url = row.url;
        rowList.id = row.id;
        rowList.openType = row.openType;
        rowList.dataType = row.dataType;
        rowList.requestType = row.requestType;
        rowList.requestParam = row.requestParam;
        rowList.h5Url = row.h5Url;
        rowList.extendAttr = row.extendAttr;
        rowList.isSet = 1;
      }
      this.$refs["edit"].showEdit(rowList);
    },
    editList(e) {
      this.getLinkList();
    },
  },
};
</script>
<style lang="scss">
.linktop {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
